<template>
<h4>商品管理</h4>
<MyTable :goodsList="goodsList">
  <template v-slot:header>
    <th scope="" >#</th>
    <th scope="">商品名称</th>
    <th scope="">价格</th>
    <th scope="">#标签</th>
    <th scope="">操作</th>
  </template>
  <template #body="{row,index}">
    <td>{{ index+1 }}</td>
    <td>{{ row.goods_name }}</td>
    <td>＄{{ row.goods_prices }}</td>
    <td>
      <input type="text" v-if="row.inputVisible" class="form-control form-control-sm ipt-tag" v-focus v-model="row.inputValue" @blur="onInputConfig(row)" @keyup.enter="onInputConfig(row)" @keyup.esc="row.inputValue=''">
      <button class="btn btn-outline-primary rounded-pill" v-else @click="row.inputVisible=true">+tag</button>
      <span class="btn btn-outline-dark" v-for="item in row.tags" :key="item">
        {{ item }}
      </span>
    </td>
    <td>
      <button type="button" class="btn btn-outline-danger btn-sm" @click="onRemove(row.id)">删除</button>
    </td>
  </template>
</MyTable>
</template>
<script setup>
import MyTable from './components/MyTable.vue';
import {ref} from 'vue';
const goodsList=ref([
  {
    id:1,
    goods_name:'夏季专柜同款女鞋',
    goods_prices:298,
    tags:['舒适','透气'],
    inputVisible:false,
    inputValue:''
  },
  {
    id:2,
    goods_name:'冬季保暖女士休闲雪地靴，舒适加绒防水短靴，防滑棉鞋',
    goods_prices:98,
    tags:['保暖','舒适'],
    inputVisible:false,
    inputValue:''
  },
  {
    id:3,
    goods_name:'夏季专柜同款女包',
    goods_prices:109,
    tags:['时尚','大容量'],
    inputVisible:false,
    inputValue:''
  },
  {
    id:4,
    goods_name:'夏季专柜同款男包',
    goods_prices:100,
    tags:['时尚','大容量'],
    inputVisible:false,
    inputValue:''
  },
  {
    id:5,
    goods_name:'长款长袖圆领女士毛衣',
    goods_prices:178,
    tags:['圆领','显瘦'],
    inputVisible:false,
    inputValue:''
  },

])
const onRemove=id=>{
  goodsList.value=goodsList.value.filter(item=>item.id!=id)
}
const vFocus=el=>{
  {el.focus()}
}
const onInputConfig=row=>{
  const val=row.inputValue
  row.inputValue=''
  row.inputVisible=false
  if(!val||row.tags.indexOf(val)!==-1){
    return
  }
  row.tags.push(val)
}
</script>

<style scoped>
th{
  text-align: center;
}
td{
  line-height: 30px;
}
.ipt-tag{
  width: 80px;
  display: inline;
}
</style>
